import React, {useEffect, useState} from 'react';
import {getHospitalList, getUpdateStatus} from "@/api/hosp";
import {Button, Space, Switch, Table} from "antd";
import {useNavigate} from "react-router-dom";

function HospitalList() {
    const navigate = useNavigate();
    const [hospitalList,setHospitalList] = useState([]);
    const [pageInfo,setPageInfo] = useState({
        current:1,
        pageSize:4,
        total:10
    })
    const [loading,setLoading] = useState(false);
    const getHospitalListAsync = async function(current:number,pageSize:number){
        setLoading(true);
        const result = await  getHospitalList(current,pageSize);
        setPageInfo({
            pageSize:result.data.size,
            current:result.data.number+1,
            total:result.data.totalElements
        })
        setHospitalList(result.data.content);
        setLoading(false);
    }
    useEffect(()=>{
        // 调用医院列表
        getHospitalListAsync(pageInfo.current,pageInfo.pageSize)
    },[])
    return (
        <div>
            <Table
                loading={loading}
                bordered={true}
                rowKey={"id"}
                pagination={{
                    ...pageInfo,
                    // onChange(current,pageSize){
                    //     getHospitalListAsync(current,pageSize);
                    // }

                    onChange:getHospitalListAsync
                }}
                columns={[
                    {
                        title:"序号",
                        align:"center",
                        render(value,rows,index){
                            return index+1;
                        }
                    },{
                        title:"医院名称",
                        align:"center",
                        dataIndex:"hosname"
                    },{
                        title:"医院编码",
                        align:"center",
                        dataIndex:"hoscode"
                    },{
                        title:"医院LOGO",
                        align:"center",
                        dataIndex:"logoData",
                        render(logoData){
                            return (
                                <img width={50} src={"data:image/png;base64,"+logoData} alt=""/>
                            )
                        }
                    },{
                        title:"是否上线",
                        align:"center",
                        // dataIndex:"status",
                        // 0：未上线 1：已上线
                        render(rows){
                            return (
                                <Switch onChange={async ()=>{
                                    await getUpdateStatus(rows.id,rows.status===1?0:1);
                                    await getHospitalListAsync(pageInfo.current,pageInfo.pageSize);
                                }} checked={rows.status===1}></Switch>
                            )
                        }
                    },{
                        title:"医院等级",
                        align:"center",
                        dataIndex:"param",
                        render({hostypeString}){
                            return hostypeString;
                        }
                    },{
                        title:"医院地址",
                        align:"center",
                        dataIndex:"param",
                        render({fullAddress}){
                            return fullAddress;
                        }
                    },{
                        title:"创建时间",
                        align:"center",
                        dataIndex:"createTime"
                    },{
                        title:"操作",
                        align:"center",
                        dataIndex:"id",
                        fixed:"right",
                        render(id){
                            return (
                                <Space>
                                    <Button onClick={()=>{
                                        navigate("/hospital/show/"+id)
                                    }} type={"primary"}>查看</Button>
                                    <Button  type={"primary"}>排班</Button>
                                </Space>
                            )
                        }
                    }
                ]}
                scroll={{
                    x:1500
                }}
                dataSource={hospitalList}
            ></Table>
        </div>
    );
}

export default HospitalList;